<!-- 学校的详情 -->
<template>
  <div class>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="选择时间">
        <elNiceTime @change="timeChange"></elNiceTime>
      </el-form-item>
      <el-form-item label="所属年级">
        <nice-select
          v-model="param.grade"
          placeholder="请选择所属年级"
          clearable
          :options="selectEnums.nice_course.grade"
        ></nice-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="schoolDetailFn()"
          >搜索</el-button
        >
      </el-form-item>
      <el-button
        type="primary"
        style="float: right;"
        size="small"
        @click="tutorStudyStatisticsFn"
        >导出</el-button
      >
    </el-form>
    <el-card class="box-card market_t">
      <el-row>
        <el-col
          :span="market.span"
          v-for="(market, index) in marketDataList"
          :key="index"
        >
          <div class="cenFlex market_t_in">{{ market.title }}</div>

          <div class="cenFlex market_t_in_title">{{ market.subTitle }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      :data="statisticsList"
      :span-method="objectSpanMethod"
      style="width: 100%; margin-top: 20px"
      header-cell-class-name="thead_f"
    >
      <el-table-column prop="grade" label="年级" width="100">
        <template slot-scope="scope">
          <b>{{ scope.row.grade || "--" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="课程" width="230">
        <template slot-scope="scope">
          <b>{{
            scope.row.course_name + "-" + scope.row.period_sort + "期" || "--"
          }}</b>
        </template>
      </el-table-column>
      <el-table-column label="主讲">
        <template slot-scope="scope">
          <b>{{ scope.row.lecturer_name || "--" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="辅导">
        <template slot-scope="scope">
          <b>{{ scope.row.teacher_name || "--" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="拟报名">
        <template slot-scope="scope">
          <b>{{ scope.row.total_plan_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="报名人数">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="该课程报名成功的学生人数"
            placement="bottom"
          >
            <div>报名人数</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{ scope.row.total_sign_up_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="报名率">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="报名人数/拟报名人数"
            placement="bottom"
          >
            <div>报名率</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{
            returnRate(scope.row.total_sign_up_num, scope.row.total_plan_num)
          }}</b>
        </template>
      </el-table-column>
      <el-table-column label="到课学生数">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="有1讲及以上签到的学生总数"
            placement="bottom"
          >
            <div>到课学生数</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{ scope.row.attendance_class_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="到课率">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="到课的学生人数/报名的学生人数"
            placement="bottom"
          >
            <div>到课率</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{
            returnRate(
              scope.row.attendance_class_num,
              scope.row.total_sign_up_num
            )
          }}</b>
        </template>
      </el-table-column>
      <el-table-column label="课程完课人数">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="听课时长占总时长的80%为完课，学生只要有一讲课完课即完课"
            placement="bottom"
          >
            <div>课程完课人数</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{ scope.row.join_class_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="课程完课率">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="完课的人数/到课的学生数"
            placement="bottom"
          >
            <div>课程完课率</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{
            returnRate(scope.row.join_class_num, scope.row.attendance_class_num)
          }}</b>
        </template>
      </el-table-column>
      <el-table-column label="转化课次">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="0付费的学生购买正价课程的课程数量"
            placement="bottom"
          >
            <div>转化课次</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{ scope.row.convert_period_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="课次转化率">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="转化课次数/到课学生数"
            placement="bottom"
          >
            <div>课次转化率</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{
            returnRate(
              scope.row.convert_period_num,
              scope.row.attendance_class_num
            )
          }}</b>
        </template>
      </el-table-column>
      <el-table-column label="续费">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="已购买正价课的学生再次购买正价课的人数"
            placement="bottom"
          >
            <div>续费</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{ scope.row.renewal_user_num || "0" }}</b>
        </template>
      </el-table-column>
      <el-table-column label="续费率">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="续费人数/转化人数"
            placement="bottom"
          >
            <div>续费率</div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <b>{{
            returnRate(scope.row.renewal_user_num, scope.row.convert_user_num)
          }}</b>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { schoolDetail } from "@/api/operate.js";
import { myEnumsMixins } from "@/utils/mixins";
import utils from "@/utils/common.js";
export default {
  mixins: [myEnumsMixins],
  // import引入的组件需要注入到对象中才能使用
  components: {
    elNiceTime: resolve =>
      require(["@/views/modules/operate-center/el-nice-time.vue"], resolve)
  },
  data() {
    // 这里存放数据
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      param: {
        start_time: "",
        end_time: "",
        school_id: this.$route.query.school_id || "19",
        grade: 398
      },
      selectArr: [],
      statisticsList: [],
      marketDataList: [],
      spanData: {},
      pos: 0,
      schoolDetial: {},
      loadingOnce: true
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    timeChange(val) {
      this.param = {
        ...this.param,
        ...val
      };
      if (this.loadingOnce) {
        this.loadingOnce = false;
        this.schoolDetailFn();
      }
    },
    // 返回计算好的比例
    returnRate(f, z) {
      return utils.returnRate(f, z);
    },
    // 初始获取学校详情的数据
    schoolDetailFn() {
      let { param } = this;
      schoolDetail(param).then(res => {
        if (res[0]) {
          return;
        }
        this.statisticsList = res[1].data.statisticsList;
        this.statisticsList.forEach(item => {
          for (let itemS of this.selectEnums.nice_course.grade) {
            if (itemS.value == item.grade) {
              item.grade = itemS.label;
            }
          }
        });
        this.spanData = {
          id: this.getSpanData(this.statisticsList, "grade")
        };
      });
    },
    // 计算需要合并的单元格
    getSpanData(data, key) {
      // 存放计算好的合并单元格的规则
      let spanData = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          spanData.push(1);
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][key] === data[i - 1][key]) {
            spanData[this.pos] += 1;
            spanData.push(0);
          } else {
            spanData.push(1);
            this.pos = i;
          }
        }
      }
      this.pos = 0;
      return spanData;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanData.id[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 点击导出Excel
    tutorStudyStatisticsFn() {
      let { param } = this;
      tutorStudyStatistics(param).then(res => {
        if (res.data) {
          utils.downExcel(
            res,
            `学管统计表${param.teacher_name ? "-" + param.teacher_name : ""}${
              param.start_time
                ? "-" + param.start_time + "-" + param.end_time
                : ""
            }`
          );
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始获取列表的数据
    console.log(this.$store.schoolDetail);
    if (!this.$store.schoolDetail) {
      this.$router.go(-1);
    } else {
      let schoolDetial = this.$store.schoolDetail;
      this.marketDataList = [
        {
          title: schoolDetial.school_name || "--",
          subTitle: "学校名称",
          key: "",
          span: 6
        },
        {
          title: `${schoolDetial.province_name}${schoolDetial.city_name}${schoolDetial.area_name}`,
          subTitle: "所属区域",
          key: "",
          span: 6
        },
        {
          title: schoolDetial.student_scale_text || "--",
          subTitle: "学校规模",
          key: "",
          span: 4
        },
        {
          title: schoolDetial.level_text || "--",
          subTitle: "等级",
          key: "",
          span: 2
        },
        {
          title: schoolDetial.recruit_students_pattern_text || "--",
          subTitle: "招生模式",
          key: "",
          span: 2
        },

        {
          title: schoolDetial.market_name || "--",
          subTitle: "市场负责人",
          key: "",
          span: 2
        },
        {
          title: schoolDetial.agent_name || "--",
          subTitle: "代理商",
          key: "",
          span: 2
        }
      ];
      console.log();
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
b {
  font-size: 20px;
}
.market_t_in {
  width: 100%;
  height: 40px;
  font-size: 20px;
}
.market_t_in_title {
  color: #999;
  cursor: pointer;
}
</style>
